@import '~styles/variables.scss';
@import '~styles/mixin.scss';

.resource-group{
	background-color: white;
	padding: 50px 40px;
	.resource-title{
		font-size: 32px;
		margin-bottom: 50px;
	}
	.resource-content{
		.resource-card{
			width: 360px;
			padding: 50px 42px;
			box-sizing: border-box;
			height: 390px;
			float: left;
			margin-left: 20px;
			margin-bottom: 20px;
			background-color: #F5F5F5;
			border: 4px solid #F5F5F5;
			&:hover{
				border-color: rgba(50,110,170,0.5);
			}
			&:nth-child(3n + 1){
				margin-left: 0;
			}
			.resource-title{
				font-size: 20px;
				color: #326eaa;
			}
			.resource-content{
				font-size: 14px;
				color: #666;
				height: 50px;
				line-height: 17px;
				overflow: hidden;
			}
			.resource-iconlist{
				margin-top: 45px;
				text-align: center;
				img{
					width: 37px;
					height: 37px;
					display: inline-block;
					+ img{
						margin-left: 20px;
					}
				}
			}
			.resource-btn{
				font-size: 14px;
				padding: 8px 49px;
				display: inline-block;
				border-radius: 20px;
				border: 1px solid #326EAA;
				color: #326EAA;
				cursor: pointer;
				margin-top: 50px;
				&:hover{
					color: white;
					background-color: #326EAA;
				}
			}
		}
	}
}
